<template>
	<view class="">
		<view class="cake-list flex flex-wrap justify-between">
			<view class="cake-item margin-bottom" v-for="item in list">
				<image :src="item.img" mode=""></image>
				<view class="flex justify-between align-center">
					<view class="info">
						<view class="text-lg">
							{{item.name}}
						</view>
						<view class="text-grey margin-tb-xs text-cut">
							{{item.french}}
						</view>
					</view>
					<view @click="handleCartBtn(item)" class="cart-btn margin-right-xs">
						<text class="iconfont icon-gouwuche"></text>
					</view>
				</view>
				<view class="text-price">
					{{item.price}}
				</view>
			</view>
		</view>
		<cake-pop></cake-pop>
	</view>
</template>

<script>
	import {cakeGet} from '../api/cake.js'
	import {mapMutations} from 'vuex'
	export default {
		name:"cake-item",
		props: {
			bid: {
				type: Number,
				default:1 //蛋糕类型 
			},
			page:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				list:[]
			};
		},
		methods: {
			...mapMutations({
				handleAdd:'cart/cartAddMut',
				handlePopShow:'cart/popShowMut'
			}),
			handleCartBtn(cakeObj){
				this.$store.commit('cart/popDataMut',cakeObj) //记录被点击的商品对象
				this.handlePopShow(true) //显示弹窗
				this.$store.commit('cart/editIdxMut',-1)
				
			}
		},
		watch:{
			bid(newVal){
				console.log('检测到了bid的变化');
				cakeGet(newVal).then(res=>{
					this.list = res.data.results
				})
			},
			page(newPage){
				cakeGet(this.bid,newPage).then(res=>{
					let {results} = res.data
					if(results.length){
						if(newPage==0){ //处理下拉刷新逻辑
							uni.stopPullDownRefresh() //关闭下拉刷新动画
							this.list = []
						}
						this.list = [
							...this.list,
							...results
						]
						return
					}
					uni.showToast({
						title:"没有更多数据了",
						icon:'none'
					})
				})
			}
		},
		created() {
			cakeGet().then(res=>{
				this.list = res.data.results
			})
		},
	}
</script>

<style lang="scss">

.cake-list{
	padding: 16upx;
	background-color: #fff;
}
.cake-item{
	width: 351upx;
	image{
		width: 100%;
		height: 351upx;
	}
}
.cart-btn{
	height: 60upx;
	width: 60upx;
	border-radius: 50%;
	background-color: #FFE32A;
	text-align: center;
	line-height: 60upx;
	flex-shrink: 0;
}
.info{
	width: 80%;
}
</style>